<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
		
		<style>
			/*进货参考表头居中、高和行高的设置*/
			
			#enterMoneyReference+div div table tr th div {
				text-align: center;
				padding: 0px;
			}
			/*进货参考表体字体大小 、居中、高和行高的设置*/
			
			#enterMoneyReference+div div table tr td div {
				text-align: center;
				padding: 0px;
			}
			
			/*退货参考表头居中、高和行高的设置*/
			
			#returnMoneyReference+div div table tr th div {
				text-align: center;
				padding: 0px;
			}
			/*退货参考表体字体大小 、居中、高和行高的设置*/
			
			#returnMoneyReference+div div table tr td div {
				text-align: center;
				padding: 0px;
			}
			
			/*添加参考进货商品表头居中、高和行高的设置*/
			
			#addReferenceIncomingGoods+div div table tr th div {
				text-align: center;
				padding: 0px;
			}
			/*添加参考进货商品表体字体大小 、居中、高和行高的设置*/
			
			#addReferenceIncomingGoods+div div table tr td div {
				text-align: center;
				padding: 0px;
			}
		</style>
	</head>

	<body>
		<div class="layui-tab">
			<ul class="layui-tab-title purchaseAndReturnOptions">
				<li class="layui-this">进货参考</li>
				<li>退货参考</li>
			</ul>
			<div class="layui-tab-content" style="padding-top:0px;">
				<!--进货参考-->
				<div class="layui-tab-item layui-show">
					<div class="layui-panel" style="width:1010px; margin:0px auto; text-align:center; padding:10px 0px;">
						<button class="layui-btn  layui-btn-radius emrAddArticle">查询添加</button>
						<button class="layui-btn  layui-btn-radius modifiedQuantity">修改数量</button>
						<button class="layui-btn  layui-btn-radius">删除商品</button>
					</div>

					<div class="layui-fluid" style="width: 1010px;">
						<div class="layui-tab-item layui-show">
							<!--进货参考表-->
							<table class="layui-hide" id="enterMoneyReference" lay-filter="currentTableFilter"></table>
						</div>
					</div>
				</div>
				<!--退货参考-->
				<div class="layui-tab-item">
					<div class="layui-panel" style="width:1010px; margin:0px auto; text-align:center; padding:10px 0px;">
						<button class="layui-btn  layui-btn-radius emrAddArticle">查询添加</button>
						<button class="layui-btn  layui-btn-radius modifiedQuantity">修改数量</button>
						<button class="layui-btn  layui-btn-radius">删除商品</button>
					</div>

					<div class="layui-fluid" style="width: 1010px;">
						<div class="layui-tab-item layui-show">
							<!--退货参考表-->
							<table class="layui-hide" id="returnMoneyReference" lay-filter="currentTableFilter"></table>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--进/退货参考-->
		<div id="addReferenceStockArticle" style="display:none;">
			<!--进退货参考弹窗的三个按钮-->
			<div class="layui-panel" style="text-align:center; padding:10px 0px;">
				<button class="layui-btn layui-btn-radius conditionQuery">按条件查询</button>
				<button class="layui-btn layui-btn-radius commodityInquiry">按商品查询</button>
				<button class="layui-btn layui-btn-radius supplierInquiry">按供货商查询</button>
			</div>

			<div>
				<!--按条件查询-->
				<div class="layui-form" style="height:115px;">
					<div>
						<div class="layui-form-item layui-inline" style="margin:15px 0px;">
							<div class="layui-inline" style="margin: 0px;">
								<label class="layui-form-label" style="padding:9px 5px 0px;">查询时间</label>
								<div class="layui-input-inline">
									<input type="text" class="layui-input" id="shijianer" placeholder=" - ">
								</div>
							</div>
						</div>
						<div class="layui-form-item layui-inline" style="margin: 0px;">
						    <label class="layui-form-label layui-inline" style="padding:9px 5px 0px; margin: 0px;">商品类别为</label>
						    <div class="layui-input-inline">
						      <input type="text" lay-verify="required" value="所有类别" autocomplete="off" class="layui-input">
						    </div>
						</div>
						<button class="layui-btn layui-btn-radius layui-btn-sm addToReferenceReturn">添加到参考<span class="purchaseAndReturn">进货</span></button>
					</div>
					
					<div>
						<div class="layui-form-item layui-inline" style="margin:0px;">
						    <label class="layui-form-label" style="padding:9px 15px 0px;">销售量大于</label>
						    <div class="layui-input-inline">
						      <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
						    </div>
						</div>
						<div class="layui-form-item layui-inline" style="margin:0px;">
						    <label class="layui-form-label" style="padding:9px 15px 0px 0px; width:70px;">或库存小于</label>
						    <div class="layui-input-inline">
						      <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
						    </div>
						    
						</div>
						<button class="layui-btn layui-btn-radius" style="">查询</button>
					</div>
				</div>
				
				<!--按商品查询-->
				<div class="layui-form" style="height:115px; display:none;">
					<div class="layui-inline">
						<div class="layui-form-item layui-inline" style="margin:15px 0px;">
						    <label class="layui-form-label" style="width:230px; margin:0px; padding:9px 0px">输入商品编号或名称：</label>
						    <div class="layui-input-inline">
						      	<input type="text" lay-verify="required" autocomplete="off" class="layui-input">
						    </div>
						</div>
						<button class="layui-btn layui-btn-radius">查询</button>
						<button class="layui-btn layui-btn-radius layui-btn-sm addToReferenceReturn">添加到参考<span class="purchaseAndReturn">进货</span></button>
					</div>
					<div class="layui-form-item" pane="">
					    <div class="layui-input-block" style="margin-left:230px;">
					      	<input type="checkbox"lay-skin="primary" title="只显示库存报警商品">
					   	</div>
					</div>
				</div>
			
				<!--按供货商查询-->
				<div class="layui-form" style="height:115px; display:none;">
					<div class="layui-inline">
						<div class="layui-form-item layui-inline" style="margin:15px 0px;">
						    <label class="layui-form-label" style="width:230px; margin:0px; padding:9px 0px">输入供货商名称或简码：</label>
						    <div class="layui-input-inline">
						      	<input type="text" lay-verify="required" autocomplete="off" class="layui-input">
						    </div>
						</div>
						<button class="layui-btn layui-btn-radius">查询</button>
						<button class="layui-btn layui-btn-radius layui-btn-sm addToReferenceReturn">添加到参考<span class="purchaseAndReturn">进货</span></button>
					</div>
				</div>
			</div>

			<div class="layui-fluid">
				<div class="layui-tab-item layui-show">
					<!--添加参考进货商品和参考退货商品表-->
					<table class="layui-hide" id="addReferenceIncomingGoods" lay-filter="currentTableFilter"></table>
				</div>
			</div>
		</div>
		
		<!--输入参考进货数量-->
		<div id="inputReferPurchaseQuantity" style="display:none;">
			<fieldset class="table-search-fieldset" style="margin:5px; padding:5px;">
				<legend style="margin-left: 15px;">商品信息</legend>
				
				<div style="padding-left: 20px;">
					<div class="layui-inline" style="width:200px"><span>商品编号：</span><span>12312</span></div>
					<div class="layui-inline" style="width:200px"><span>商品名称：</span><span>12312</span></div>
					<div class="layui-inline" style="width:200px"><span>规格型号：</span><span>12312</span></div>
					<div class="layui-inline" style="width:200px"><span class="layui-inline" style="width:70px; text-align:right;">单位：</span><span>12312</span></div>
					<div class="layui-inline" style="width:200px"><span>当前库存：</span><span>12312</span></div>
					<div class="layui-inline" style="width:200px"><span class="layui-inline" style="width:70px; text-align:right;">颜色：</span><span>12312</span></div>
					<div class="layui-inline" style="width:200px"><span>生产厂商：</span><span>12312</span></div>
					<div class="layui-inline" style="width:200px"><span class="layui-inline" style="width:70px; text-align:right;">备注：</span><span>12312</span></div>
				</div>
			</fieldset>
			
			<div class="layui-form">
				<div class="layui-form-item layui-inline" style="margin:10px 0px 0px 0px;">
					<label class="layui-form-label layui-inline" style="padding:9px 5px 0px; margin:0px 0px 0px 100px; width:100px">参考<span class="purchaseAndReturn">进货</span>数量：</label>
					<div class="layui-input-inline">
						<input type="text" lay-verify="required" value="" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div style="color:red; text-align:center; margin-top:20px;">(数量只作为一个进货或退货的参考，不修改实际库存)</div>
			</div>
			<div style="display: flex; justify-content: space-around; margin-top: 20px;">
				<button class="layui-btn layui-btn-radius layui-btn-sm">确认</button>
				<button class="layui-btn layui-btn-radius layui-btn-sm">退出</button>
			</div>
		</div>

		<!--修改数量-->
		<div id="modifiedQuantity" style="display:none;">
			<fieldset class="table-search-fieldset" style="margin:5px; padding:5px;">
				<legend style="margin-left: 15px;">商品信息</legend>
				
				<div style="padding-left: 20px;">
					<div class="layui-inline" style="width:200px"><span>商品编号：</span><span>12312</span></div>
					<div class="layui-inline" style="width:200px"><span>商品名称：</span><span>12312</span></div>
					<div class="layui-inline" style="width:200px"><span>规格型号：</span><span>12312</span></div>
					<div class="layui-inline" style="width:200px"><span class="layui-inline" style="width:70px; text-align:right;">单位：</span><span>12312</span></div>
					<div class="layui-inline" style="width:200px"><span>当前库存：</span><span>12312</span></div>
					<div class="layui-inline" style="width:200px"><span class="layui-inline" style="width:70px; text-align:right;">颜色：</span><span>12312</span></div>
					<div class="layui-inline" style="width:200px"><span>生产厂商：</span><span>12312</span></div>
					<div class="layui-inline" style="width:200px"><span class="layui-inline" style="width:70px; text-align:right;">备注：</span><span>12312</span></div>
				</div>
			</fieldset>
			
			<div class="layui-form">
				<div class="layui-form-item layui-inline" style="margin:10px 0px 0px 0px;">
					<label class="layui-form-label layui-inline" style="padding:9px 5px 0px; margin:0px 0px 0px 100px; width:100px">参考进货数量：</label>
					<div class="layui-input-inline">
						<input type="text" lay-verify="required" value="" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div style="color:red; text-align:center; margin-top:20px;">(数量只作为一个进货或退货的参考，不修改实际库存)</div>
			</div>
			<div style="display: flex; justify-content: space-around; margin-top: 20px;">
				<button class="layui-btn layui-btn-radius layui-btn-sm">确认</button>
				<button class="layui-btn layui-btn-radius layui-btn-sm">退出</button>
			</div>
		</div>
		
		<script src="../../layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script>
			layui.use(['form', 'table', 'laydate'], function() {
				var form = layui.form,
					layer = layui.layer,
					$ = layui.$,
					table = layui.table;
				var laydate = layui.laydate;

                /*进退货弹窗里面所有信息区分进货与退货变量*/
				var purchaseAndReturn = "进货";

				//日期范围
				laydate.render({
					elem: '#shijianer',
					range: true
				});

                /*所选列表添加样式*/
                table.on('row(currentTableFilter)', function(obj){
                    obj.tr.addClass('layui-bg-green').siblings().removeClass('layui-bg-green');
                });

				/*进货参考表*/
				table.render({
					elem: '#enterMoneyReference',
					//url: '../api/aaaaa.json',
					data: [],
					height: '300',
					defaultToolbar: ['filter', 'exports', 'print', {
						title: '提示',
						layEvent: 'LAYTABLE_TIPS',
						icon: 'layui-icon-tips'
					}],
					cols: [
						[{
							field: 'id',
							width: 120,
							title: '商品编号'
						}, {
							field: 'username',
							width: 140,
							title: '商品名称'
						}, {
							field: 'sex',
							width: 120,
							title: '单位'
						}, {
							field: 'city',
							width: 120,
							title: '产品规格'
						}, {
							field: 'sign',
							title: '生产厂商',
							width: 140
						}, {
							field: 'experience',
							width: 120,
							title: '供货商'
						}, {
							field: 'experience',
							width: 120,
							title: '参考进货数量'
						}, {
							field: 'experience',
							width: 120,
							title: '当前库存数量'
						}]
					]
				});

				/*退货参考表*/
				table.render({
					elem: '#returnMoneyReference',
					//url: '../api/aaaaa.json',
					data: [],
					height: '300',
					defaultToolbar: ['filter', 'exports', 'print', {
						title: '提示',
						layEvent: 'LAYTABLE_TIPS',
						icon: 'layui-icon-tips'
					}],
					cols: [
						[{
							field: 'id',
							width: 120,
							title: '商品编号'
						}, {
							field: 'username',
							width: 140,
							title: '商品名称'
						}, {
							field: 'sex',
							width: 120,
							title: '单位'
						}, {
							field: 'city',
							width: 120,
							title: '产品规格'
						}, {
							field: 'sign',
							title: '生产厂商',
							width: 140
						}, {
							field: 'experience',
							width: 120,
							title: '供货商'
						}, {
							field: 'experience',
							width: 120,
							title: '参考退货数量'
						}, {
							field: 'experience',
							width: 120,
							title: '当前库存数量'
						}]
					]
				});
				
				/*添加参考进货商品和参考退货商品表*/
				table.render({
					elem: '#addReferenceIncomingGoods',
					//url: '../api/aaaaa.json',
					data: [],
					height: '300',
					defaultToolbar: ['filter', 'exports', 'print', {
						title: '提示',
						layEvent: 'LAYTABLE_TIPS',
						icon: 'layui-icon-tips'
					}],
					cols: [
						[{
							field: 'id',
							width: 100,
							title: '商品编号'
						}, {
							field: 'username',
							width: 140,
							title: '商品名称'
						}, {
							field: 'sex',
							width: 120,
							title: '所属类型'
						}, {
							field: 'city',
							width: 60,
							title: '单位'
						}, {
							field: 'sign',
							title: '产品规格',
							width: 90
						}, {
							field: 'experience',
							width: 90,
							title: '销售数量'
						}, {
							field: 'experience',
							width: 90,
							title: '库存数量'
						}]
					]
				});
				
				/*添加参考进货商品*/
				$('.emrAddArticle').click(function() {
					revampArticle();
				});
				function revampArticle() {
					layer.open({
						type: 1,
						title: '添加参考'+purchaseAndReturn+'商品',
						content: $('#addReferenceStockArticle'),
						area: ["740px", "520px"]
					})
				};
				
				/*输入参考进货数量*/
				$('.addToReferenceReturn').click(function(){
					addToReferenceReturn();
				});
				function addToReferenceReturn() {
					layer.open({
						type: 1,
						title: '输入参考'+purchaseAndReturn+'数量',
						content: $('#inputReferPurchaseQuantity'),
						area: ["500px", "320px"]
					})
				};
				
				/*修改数量*/
				$('.modifiedQuantity').click(function() {
					modifiedQuantity();
				});
				function modifiedQuantity() {
					layer.open({
						type: 1,
						title: '修改数量',
						content: $('#modifiedQuantity'),
						area: ["500px", "320px"]
					})
				};

                /*进退货弹窗里面所有信息区分进货与退货*/
                $('.purchaseAndReturnOptions>li:nth-of-type(1)').click(function () {
                    $('.purchaseAndReturn').html("进货");
                    purchaseAndReturn = "进货";
                });
                $('.purchaseAndReturnOptions>li:nth-of-type(2)').click(function () {
                    $('.purchaseAndReturn').html("退货");
                    purchaseAndReturn = "退货";
                });
			});
		</script>
		
		<!--js代码-->
		<script>
			layui.use(['form', 'table', 'laydate'], function() {
				var form = layui.form,
					layer = layui.layer,
					$ = layui.$;
					
				/*每次打开查询添加默认选择*/
				$('.emrAddArticle').click(function(){
					$('#addReferenceStockArticle').children('div:nth-of-type(1)').children('button:nth-of-type(1)').css('background-color','hotpink');
					$('#addReferenceStockArticle').children('div:nth-of-type(1)').children('button:nth-of-type(1)').siblings().css('background-color','#009688');
					$('#addReferenceStockArticle').children('div:nth-of-type(2)').children('div:nth-of-type(1)').css('display','inline-block');
					$('#addReferenceStockArticle').children('div:nth-of-type(2)').children('div:nth-of-type(1)').siblings().css('display','none');
				});
				
				/*按条件查询*/
				$('.conditionQuery').click(function(){
					$(this).css('background-color','hotpink');
					$(this).siblings().css('background-color','#009688');
					$('#addReferenceStockArticle').children('div:nth-of-type(2)').children('div:nth-of-type(1)').css('display','inline-block');
					$('#addReferenceStockArticle').children('div:nth-of-type(2)').children('div:nth-of-type(1)').siblings().css('display','none');
				});
				
				/*按商品查询*/
				$('.commodityInquiry').click(function(){
					$(this).css('background-color','hotpink');
					$(this).siblings().css('background-color','#009688');
					$('#addReferenceStockArticle').children('div:nth-of-type(2)').children('div:nth-of-type(2)').css('display','inline-block');
					$('#addReferenceStockArticle').children('div:nth-of-type(2)').children('div:nth-of-type(2)').siblings().css('display','none');
				});
				
				/*按供货商查询*/
				$('.supplierInquiry').click(function(){
					$(this).css('background-color','hotpink');
					$(this).siblings().css('background-color','#009688');
					$('#addReferenceStockArticle').children('div:nth-of-type(2)').children('div:nth-of-type(3)').css('display','inline-block');
					$('#addReferenceStockArticle').children('div:nth-of-type(2)').children('div:nth-of-type(3)').siblings().css('display','none');
				});
			});
		</script>
	</body>

</html>